import React, { useRef } from 'react';
import { Editor } from '@tinymce/tinymce-react';
import axios from 'axios';
function Rich() {
    const editorRef = useRef(null);
    const log = () => {
      if (editorRef.current) {
        console.log(editorRef.current.getContent());
        // editorRef.current.getContent()就是内容
      }
    };
    // 上传图片blobInfo2进制数据信息流
    const upImg = (blobInfo, progress)=>{
        // 返回一个promise
        return new Promise((resolve,reject)=>{
            // 创建表单对象
            const formData = new FormData();
            // 把文件追加到表单对象
            formData.append('file', blobInfo.blob(), blobInfo.filename());
            axios.post("http://dida100.com:8888/api/file/upload",formData)
            .then(res=>{
                // 返回一个图片地址
                resolve("http://dida100.com:8888"+res.data.file.path);
            })
        })
    }
    return ( <div>富文本编辑器

<Editor
        // apikey注册获得，onInit=引用dom  初始化的
        // initialValue初始化值
        // init初始化配置 height高度  menubar菜单栏 plugins插件 toolbar工具 content_Style内容样式
        apiKey='your-api-key'
        onInit={(evt, editor) => editorRef.current = editor}
        initialValue="<p>好用的react富文本编辑器（颜值高）.</p>"
        init={{
          height: 500,
        //   指定图片上传处理器
        images_upload_handler:upImg,
        language:'zh_CN',
          menubar: false,
          plugins: [
            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
            'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
            'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount,'
          ],
          toolbar: 'undo redo | blocks | ' +
            'bold italic forecolor | alignleft aligncenter ' +
            'alignright alignjustify | bullist numlist outdent indent | ' +
            'removeformat |image| code help',
          content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
        }}
      />
      <button onClick={log}>输出编辑器内容</button>
    </div> );
}

export default Rich;